<template>
	<view class="content">
		<text class="title1">设备信息详情</text>
		<view class="input-group">
			<view class="input-row border">
				<text class="title">设备编号：</text>
				<m-input type="text" focus v-model="listData.devId" placeholder="设备编号"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">设备型号：</text>
				<m-input type="text" focus v-model="listData.devModel" placeholder="设备型号"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">设备名称：</text>
				<m-input type="text" focus v-model="listData.devName" placeholder="设备名称"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">设备品牌：</text>
				<m-input type="text" focus v-model="listData.devBrand" placeholder="设备品牌"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">类型/属性：</text>
				<m-input type="text" focus v-model="listData.devType" placeholder="类型/属性"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">使用功能：</text>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array" v-if = 'refresh'>
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="input-row border">
				<text class="title">使用位置：</text>
				<m-input type="text" focus v-model="listData.devPosition" placeholder="使用位置"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">是否加急：</text>
				<checkbox-group class="checkboxed">
					<label><checkbox value="cb" v-model="listData.isAnxious" @click="isAnxious()"/>加急</label>
				</checkbox-group>
			</view>
			<view class="input-row border">
				<text class="title">预约日期：</text>
				<m-input type="text" focus v-model="listData.devTime" placeholder="预约日期"></m-input>
			</view>
		</view>
		<view>
			<view class="test">
				<button type="primary" @click="onShowDatePicker('rangetime')">请选择预约日期时间</button>
			</view>
			<mx-date-picker :disableBefore="false" :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			
		</view>
		
		<view class="uni-padding-wrap uni-common-mt">
			<button type="primary" @click="apply()">立即预约</button>
		</view>
	</view>
</template>

<script>
	import mInput from '@/components/m-input.vue'
	import MxDatePicker from '@/components/mx-datepicker/datepicker.vue'
	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import store from '../../store/index.js'
	
	export default{
		components: {
			mInput,
			MxDatePicker
		},
		data() {
			return {
				refresh:true,
				array: [],
				index: 0,
				listData:{
					devId: '',
					devModel: '',
					devName: '',
					devBrand: '',
					devType: '',
					devFunction: '',
					devPosition: '',
					cb: '',
					devTime: '',
					sTime: '',
					eTime: '',
					isAnxious: '',
				},
				time: 1,
				isFunction: false,
				isChoose: false,
				showPicker: false,
                rangetime: ['2019/05/01 00:00','2019/05/05 00:00'],
                type: 'rangetime',
                value: ''
			}
		},
		computed: mapState(['userName','userId']),
		
		onLoad(event) {
		    // 目前在某些平台参数会被主动 decode，暂时这样处理。
		    try {
		        this.listData = JSON.parse(decodeURIComponent(event.detailDate));
				this.listData.isAnxious = '否';
				console.log(this.listData);
		    } catch (error) {
		        this.listData = JSON.parse(event.detailDate);
		    }
			this.getListFunction();
			console.log(this.userId);
		},
		onPullDownRefresh() {
			this.getListFunction();
		},
		onReachBottom() {
			this.getListFunction();
		},
		onShareAppMessage() {
		    return {
		        path: '/pages/reservation/apply?detailDate=' + JSON.stringify(this.listData)
		    }
		},
		methods: {
            onShowDatePicker(type){//显示
                this.type = type;
                this.showPicker = true;
                this.value = this[type];
            },
            onSelected(e) {//选择
                this.showPicker = false;
				this.isChoose = true;
                if(e) {
                    this[this.type] = e.value; 
                    //选择的值
					this.listData.devTime = e.value;
					this.listData.sTime = e.value[0];
					this.listData.eTime = e.value[1];
					console.log(this.listData.sTime);
					console.log(this.listData.eTime);
                    console.log('value => '+ e.value);
                    //原始的Date对象
                    console.log('date => ' + e.date);
                }
            },
			getListFunction() {
				var data = {
					column: "devFunction"
				};
				uni.request({
					url: "http://115.159.219.165:8080/devices/getDeviceFunction",
					data: {
						devId: this.listData.devId,
					},
					method: "POST",
					success: function(data) {
						for (var i=0; i<data.data.info.list.length; i++){
							this.array[i] = data.data.info.list[i].function;
						}
						console.log(this.array);
						this.refresh = false;
						this.$nextTick(function(){
							this.refresh = true;
							
						})
					}.bind(this),
					fail: function(data, code) {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.target.value);
				this.index = e.target.value;
				this.isFunction = true;
			},
			isAnxious() {
				console.log("点击了" + this.time + "次！");
				this.time++;
				if(this.time % 2 == 1){
					this.listData.isAnxious = '否';
				}else{
					this.listData.isAnxious = '是';
				}
				console.log(this.listData.isAnxious);
				console.log(store.state.userId);
			},
			apply() {
				if (!this.isFunction){
					uni.showToast({
						title: '请选择功能',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.isChoose){
					uni.showToast({
						title: '请选择日期时间',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.request({
					url: "http://115.159.219.165:8080/devices/applyDevices",
					data: {
						user_id: store.state.userId,  //全局变量 store 如何传递值
						devId: this.listData.devId,
						devFunction: this.array[this.index],   //
						data: this.listData.sTime,
						start: this.listData.sTime,
						end: this.listData.eTime,
						isAnxious: this.listData.isAnxious,
					},
					method: "POST",
					success:function(data){
						console.log(data.data);
						uni.switchTab({
							url: 'reservation',
						});
						uni.showToast({
							title: '预约成功',
							icon: 'success',
							duration: 2000
						});
						// console.log(store.state.userId);
					}.bind(this),
					fail:function(data, code){
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
        }
	}
</script>

<style>
	.title1 {
		font-size: 26px;
		color: $light_gray;
	
		text-align: center;
		font-weight: bold;
	}
	.uni-form-item {
		padding: 20upx 0;
		align-items: center;
	}
	.input-row .title {
		width: 30%;
		height: 30px;
		padding: 10px 0;
		padding-left: 30px;
		line-height: 30px;
	}
	.checkboxed {
		height: 30px;
		padding: 10px 0;
		padding-left: 7px;
		line-height: 30px;
	}
	.test{
        text-align: center;
        padding: 10px 0;
    }
    button{
        margin: 20upx;
        font-size: 28upx;
    }
</style>
